<template>
	 <view class="content">
		 <view class="maskLayer" v-if="maskLayerShow">
		 </view>
		 <view class="submitForm" v-if="submitFormShow">
		 	<text style="top: 3%;position: relative;left: 33%;">请写下您的意见</text>
			<view class="cu-form-group margin-top">
					<textarea placeholder="提出您的建议" :value="bigcontain" @input="getValue"></textarea>
			</view>
		 	<button class="cu-btn round line-green" style="position: relative;top: 20%;left: 40%;" @click="submit1">提交</button>	
		 </view>
		 <view class="body">
			 <view class="body-1">
				 <view class="body-11">
				 <text class="cuIcon-refresh lg text-gray" style="padding-left: 42%;"></text>
				 <view class="body-11">报修</view>
				 </view>
				 <view class="body-12">
					 <text>问题描述</text>
					 <view class="cu-bar  search">
					 	<view class="search-form round" style="float: left;">
					 		<input type="text" placeholder="输入您的问题" v-model="contain1"></input>
					 	</view>
					 </view>
				 </view>
				 <view class="body-13">
					 <text>联系方式</text>
					 <view class="cu-bar  search">
					 	<view class="search-form round" style="float: left;">
					 		<input type="text" placeholder="输入您的联系方式" v-model="contain2"></input>
					 	</view>
					 </view>
				 </view>
				 <button class="cu-btn round line-yellow" style="margin-left: 42%; align-content: center; margin-top: 3%;"size="mini" @click="submit()" >提交</button>
			</view>
			 <view class="body-3">
				 <view class="body-31" style="font-size: 40upx;">
					 <text class="cuIcon-peoplefill lg text-gray" style="padding-left: 42%;"></text>
					 <view>维修</view>
				 </view>
				 <text style="font-size: 40upx;">维修网址</text>
				 <view class="cu-bar  search">
				 	<view class="search-form round" style="float: left;">
				 		<input type="text" placeholder="输入您要维修的网址" v-model="contain3"></input>
				 	</view>
				 </view>
				 <button class="cu-btn round line-blue" style="  border-top: 0upx; align-content: center ;margin-top: 3%;margin-left: 42%;"size="mini" @click="fix()" >维修</button>
			 </view>
			 <view class="body-2" style="position: absolute;bottom: 10%;right: 0;">
			 				<text class="cuIcon-edit lg grey"></text>
			 				<text style="color: red;" @click="show">意见反馈</text>
			 </view>
	 </view>
</view>
</template>

<script>
	
	export default {
		
		
		data() {
			
			return{
				 contain2:"",
				 contain1:"",
				 bigcontain:"",
				 contain3:"",
				 maskLayerShow:false,
				 submitFormShow:false
			}
		},
		onLoad() {
			uni.request({
				url:"http://rap2api.taobao.org/app/mock/286869/example/1626135872738",
				data:{},
				success: () => {
					
				},
				complete: () => {
					
				},
				fail: () => {
					
				}
			})
            
		},
		methods: {
		 getValue(e){
			this.bigcontain=e.detail.value; 
		 },	
		 show(){
			this.maskLayerShow=true;
			this.submitFormShow=true; 
		 },
		 hide(){
			this.maskLayerShow=false;
			this.submitFormShow=false; 
		 },	 
         submit(){
			 if(this.contain1!=""&&this.contain2!=""){
				 uni.showToast({
				 	title:"提交成功"
				 })
				 this.contain1='';
				 this.contain2='';
			 }
			 else if(this.contain1==""&&this.contain2!=""){
				 uni.showToast({
					 icon:'none',
				 	title:"请输入问题"
				 })
			 }
			 else if(this.contain1!=""&&this.contain2==""){
				 uni.showToast({
					  icon:'none',
				 	title:"请输入联系方式"
				 })
			 }
			 else if(this.contain1==""&&this.contain2==""){
				 uni.showToast({
					  icon:'none',
				 	title:"请输入"
				 })
			 }
		 },
		 submit1(){
			 var that=this;
			  if(that.bigcontain!=""){
			     uni.showModal({
					  icon:'none',
					  title:"确定提交"+"?",
					  success(res) {
					         if (res.confirm) {
								 that.hide();
								 that.bigcontain=''; 
								 uni.showToast({
								 	title: '提交成功'
								 });
					         } else if (res.cancel) {
					         }
					     }
				      })
				}
				 else{
					 uni.showToast({
						  icon:'none',
						 title:"请输入具体问题"
					 })
						 
				 }
		 },
		 fix(){
			 if(this.contain3=="")
			 {
				 uni.showToast({
				 	icon:"none",
					title:"请输入",
				 })
			 }
			 else{
				 uni.showToast({
				 	icon:"loading",
					title:"正在维修",
				 })
				 this.contain3='';
			 }
		 }
		}
	}
</script>

<style>
	page{width: 100%; height: 100%;background-color: #F8F8F8}
	.body{
	 width: 100%;
	 border-radius: 70upx;
	}
	.body-1{
		font-size: 40upx;
		height: 40%;
		width: 100%;
		border-radius: 25upx;
	}
	.body-11{
		height: 50upx;
		display: flex;
	}
	.body-1 text{
		height: 30upx;
	}
	.body-12{
		margin-top: 2%;
		height: 110upx;
	}
	.body-13{
		margin-top:10%;
	}
	.body-3{
		padding-top: 10%;
		margin-top: 5px;
		height: 130px;
		width: 100%;
		border-radius: 25upx;
	}
	.body-31{
		display: flex;
		font-size: 40upx;
	}
	.maskLayer{
		width: 100%;
		height: 100%;
		background-color: #C0C0C0;
		opacity: 0.6;
		z-index: 5;
		position: fixed;
		left: 0;
		top: 0;
	}
	.submitForm{
		width: 70%;
		height: 50%;
		background-color: #F8F8F8;
		opacity: 1;
		z-index: 10;
		position: absolute;
		left: 15%;
		top: 30%;
	}
</style>
